<template>
	<view>
	<view class="userInfo"></view>
		<view class="userLayout">
			<view class="infoOut">
				<view class="infoAvatar">
					<image src="../../static/images/user/avatar.jpg" class="avatar"></image>
				</view>
				<view class="infotext">
					<view class="infoName">{{username}}</view>
					<view class="tete">{{tele}}</view>
					<view class="jifen">店铺:{{store}}</view>
				</view>
			</view>
		</view>

		
		
		
		<view class="out">
			<view class="myFunction">我的功能</view>
			<view class="ziliaoBox">
				<view class="innerBox1" @click="improveInfo">
					<view class="img">
						<image src='../../static/images/user/ziliao.png' class="ziliao"></image>
					</view>
					<view class="tip">完善资料</view>
				</view>
				<view class="innerBox2">
					<view class="img">
						<image src="../../static/images/user/krfuImg.png" class="kefu"></image>
					</view>
					<view class="tip">联系客服</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				username: "幸福的五花肉",
				tele: "18078638796467",
				store: "中华城店"
			}
		},
		methods: {
			improveInfo() {
				uni.navigateTo({
					url: "/pages/user/info"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*#ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}

	/* #endif
page{
	
}
.userInfo{
	height: 400rpx;
	width: 100vw;
	background: #AB7967;
	background:
	linear-gradient(to bottom,transparent,#fff 400rpx),
	linear-gradient(to right,#8B4513 20%,#8B4513);
}
.infoOut{
	// width: 350px;
	width: 100%;
	height: 240rpx;
	margin: auto;
	margin-top:-120px;
	border-radius: 7px;
	// background-color: white;
	display: flex;
	flex-direction:row;
	border: 1px solid gainsboro;
}
.infoAvatar{
	width: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.infotext{
	width: 230px;
	margin-left: 15px;
	margin-top: 15px;
	position: relative;
}
.avatar{
	height: 80px;
	width: 80px;
	margin: 10px;
}
.infoName{
	margin-top: 10px;
	font-size: 25px;
	font-weight: 800;
	font-family: "楷体";
}
.tete{
	font-size: 30rpx;
	margin-top: 15rpx;
	color: #939393;
}
.jifen{
	font-size: 30rpx;
	position: absolute;
	right: 15rpx;
	bottom: 23rpx;
	font-family: "楷体";
	font-size: 400;
}

.out{
		height: 220rpx;
		width: 350px;
		margin: auto;
		margin-top: 20px;
		border-radius: 7px;
		background-color: white;
		margin-bottom: 10px;
		border: 1px solid gainsboro;
		.myFunction{
			height: 85rpx;
			font-size: 38rpx;
			font-weight: 550;
			margin-left: 20rpx;
			margin-right: 20px;
			padding-top: 10px;
			padding-left: 10px;
			border-bottom:1px solid #9e9c9c;
		}
		.ziliaoBox{
			width: 100%;
			height: 50px;
			display: flex;
			flex-direction: row;
		}
		.innerBox1,.innerBox2{
			margin-top: 10rpx;
			width: 20%;
			height: 50px;
			display: flex;
			flex-direction: column;
		}
		.ziliao{
			height: 30px;
			width: 30px;
		}
		.kefu{
			width: 25px;
			height: 25px;
			
		}
		.img{
			height: 70%;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.tip{
			text-align: center;
			font-size: 1px;
			color: #676666;
			font-family: "黑体";
			font-weight: 600;
			padding-top: 2px;
		}
		.innerBox{
			box-shadow:3rpx 3rpx 7rpx #2a1105 ;
			
		}
	}
	
</style>